<template>
  <div class="app-container">
    <el-button   class="filter-item marginRB10" type="primary" icon="el-icon-plus" @click="handleCreate()">添加</el-button>

    <el-input class="marginRB10" v-model="listQuery.name" placeholder="请输入礼物名字" style="width:200px;" clearable></el-input>
<!--    <el-input class="marginRB10" v-model="listQuery.gift_id" placeholder="请输入礼物id" style="width:200px;" clearable></el-input>-->
    <el-date-picker class="marginRB10" v-model="listQuery.start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="创建开始时间"></el-date-picker>
    <el-date-picker class="marginRB10" v-model="listQuery.end_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="创建结束时间"></el-date-picker>
    <el-button type="primary" @click="getList" icon="el-icon-search"   class="marginRB10">搜索</el-button>

    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" > </el-table-column>
      <el-table-column prop="gift_name_1" label="礼物1名称" > </el-table-column>
      <el-table-column prop="gift_picture_1" label="礼物1图片" >
        <template slot-scope="scope">
          <el-popover placement="right" max-width="220" trigger="hover">
            <img :src="scope.row.gift_picture_1" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.gift_picture_1" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="gift_name_2" label="礼物2名称" > </el-table-column>
      <el-table-column prop="gift_picture_2" label="礼物2图片" >
        <template slot-scope="scope">
          <el-popover placement="left" width="220" trigger="hover">
            <img :src="scope.row.gift_picture_2" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.gift_picture_2" alt="" style="height: 25px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="ee" label="日期" >
        <template slot-scope="scope">
          {{scope.row.start_date}}~{{scope.row.end_date}}
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="添加日期" > </el-table-column>

      <el-table-column min-width="180" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>
          <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage" @pagination="getList"/>

    <el-dialog v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="120px" style="width: 400px; margin: 0 auto;">
        <el-form-item label="礼物1" prop="name">
          <el-select filterable v-model="form.gift_id_1" class="filter-item marginRB10" placeholder='请选择礼物1' style="width: 220px;">
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='礼物2' prop="price">
          <el-select filterable v-model="form.gift_id_2" class="filter-item marginRB10" placeholder='请选择礼物2' style="width: 220px;">
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="week_date">
          <el-date-picker v-model="form.week_date" type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { saveData, deleteData,  updateData, listData, getGiftList } from '@/api/gift/giftWeek'
  export default {
    data() {
      return {
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        selectList: [{ id: undefined, name: '全部状态' },{ id: '1', name: '启用' }, { id: '2', name: '禁用' } ],
        menuList: [{id:'1',gift_name_1:'1',gift_picture_1:'1',gift_name_2:'1',gift_picture_2:'1',ee:'1',ff:'1'}],
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          id: undefined,
          gift_id_1: undefined,
          gift_id_2: undefined,
          week_date: undefined,
        },
        rules: {
          gift_id_1: [{ required: true, message: '请选择礼物', trigger: 'blur' }],
          gift_id_2: [{ required: true, message: '请选择礼物', trigger: 'blur' }],
          week_date: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.getList()
      this.getGiftList()
    },
    methods: {
      getGiftList(){
        getGiftList().then(response => {
          this.selectList = response.data
        })
      },
      getList() {
        this.listLoading = true
        listData(this.listQuery).then(response => {
          this.menuList = response.data.list
          this.total = response.data.meta.total;
          this.listLoading = false
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        this.form.id= row.id
        this.form.gift_id_1= row.gift_id_1
        this.form.gift_id_2= row.gift_id_2
        this.form.week_date= row.end_date

        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        this.form = Object.assign({}, this.form)
      },
      handleDelete(row) {
        let data = {ids:row.id}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      submitForm() {
        this.$refs['dataForm'].validate(valid => {
          if (valid && this.dialogStatus === 'create') {
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            saveData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }else if(valid && this.dialogStatus === 'update'){
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            updateData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined,
          gift_id_1: undefined,
          gift_id_2: undefined,
          week_date: undefined,
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      }
    }
  }
</script>
